<template>
  <el-popover placement="top-start" :width="width" trigger="hover" :content="params.label" v-if="params.label.length >= 6">
    <template #reference>
      <div class="labelBorder">{{ params.label }}<slot name="labelIcon"></slot></div>
    </template>
  </el-popover>
  <div class="labelBorder" v-else>{{ params.label }}<slot name="labelIcon"></slot></div>
</template>

<script setup>
import { ref } from 'vue'
const params = defineProps({
  width: {
    type: String,
    default: '200'
  },
  label: {
    type: String,
    default: ''
  }
})
</script>

<style lang="scss" scoped>
// 输入框label 边框
.labelBorder {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  flex-grow: 1;
  align-items: center;
  padding-left: 10px;
  margin-right: -13px;
  background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
  background-image: none;
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  transition: var(--el-transition-box-shadow);
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
  text-align: left;
  background: #fafafa;
  .el-icon {
    position: relative;
    top: 2px;
    left: 5px;
  }
}
</style>
